{% extends "base.html" %}
{% load upload_tags %}

{% block breadcrumb %}
    {{ block.super }}
    {% load breadcrumb_tags %}
    {% add_crumb 'Phân phối chương trình' %}

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit_button").click(function() {
                var sub = $("select[name=subject]").val();
                var grade = $("select[name=grade]").val();
                var term = $("select[name=term]").val();
                $("#selectform").attr("action", "/app/manage_agenda/" + sub + "/" + grade + "/" + term);
                $("#selectform").submit();
            });

            $("#notify").ajaxSuccess(function(event, request, settings, json) {
                if (json.message != null) {
                    $(this).html("<ul>" + json.message + "</ul>");
                    $(this).delay(1000).fadeOut(10000);
                    if (json.message == 'Đã lưu. Vui lòng cập nhật các tiết học mới') window.location.reload(true);
                }
                else {
                    $(this).text("Lưu");
                    $(this).delay(1000).fadeOut('fast');
                }
            });

            $("#upload_modal").on('hidden', function(){
                location.reload('true');
            });
            $("#upload-modal-exit").click(function(){
                $("#upload_modal").modal('hide');
                return false;
            });

            $('#fileupload').fileupload({
                url: '/app/import/systemAgenda/' + {{ id }} + '/' + {{ grade }} +'/' + {{ term }},
                dataType: 'json',
                acceptFileTypes: /(\.|\/)(xls)$/i,
                maxNumberOfFiles: 5
            });

        });
    </script>
{% endblock %}

{% block content %}
    <div class="row-fluid pagination-centered">
        <form class="form-inline " id="selectform" action="" name="info" method="post">{% csrf_token %}
            {{ form }}
            <button class="btn btn-success" id="submit_button">Xem</button>
        </form>
        <a class="btn " title="Nhập chương trình học từ file Excel"
           href="#upload_modal"
           data-toggle="modal"
           id="import"><i class="icon-upload-alt"></i> Nhập từ Excel</a>
        <a class="btn" title="Xuất chương trình học ra file Excel."
           href="{% url export_system_agenda id grade term %}" id="export">
            <i class="icon-download-alt"></i>
            Xuất ra Excel</a>
    </div>

    {% if list %}
        <h3>Môn {{ subject }} lớp {{ grade }} kì {{ term }}</h3>
        <table class="table table-striped table-bordered">
            <tr>
                <th>Tiết</th>
                <th>Tiêu đề</th>
                <th>Ghi chú</th>
            </tr>
            {% for u in list %}
                <tr>
                    <td>{{ u.index }}</td>
                    <td>{{ u.title }}</td>
                    <td>{{ u.note }}</td>
                </tr>
            {% endfor %}
        </table>
    {% else %}
        <div align="center">Chưa có phân phối chương trình môn {{ subject }} lớp {{ grade }} kì {{ term }}.
        </div>
    {% endif %}
    <div class="modal fade" id="upload_modal" style="display: none;">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Nhập phân phối chương trình từ file Excel</h3>
        </div>
        <div class="modal-body">
            <!-- The file upload form used as target for the file upload widget -->
            <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="span5">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-success fileinput-button">
                                <i class="icon-plus icon-white"></i>
                                <span>Chọn files...</span>
                                <input type="file" name="files[]" multiple>
                            </span>
                        <button type="submit" class="btn btn-primary start">
                            <i class="icon-upload icon-white"></i>
                            <span>Tải tất cả</span>
                        </button>
                        <button type="reset" class="btn btn-warning cancel">
                            <i class="icon-ban-circle icon-white"></i>
                            <span>Dừng lại</span>
                        </button>
                        <button type="button" class="btn btn-danger delete">
                            <i class="icon-trash icon-white"></i>
                            <span>Xóa</span>
                        </button>
                        <input type="checkbox" class="toggle">
                    </div>
                    <div class="span3">
                        <!-- The global progress bar -->
                        <div class="progress progress-success progress-striped active fade">
                            <div class="bar" style="width:0;"></div>
                        </div>
                    </div>
                </div>
                <!-- The loading indicator is shown during image processing -->
                <div class="fileupload-loading"></div>
                <br>
                <!-- The table listing the files available for upload/download -->
                <table class="table table-striped">
                    <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">

                    </tbody>
                </table>
            </form>
            <div id="errorDetail">

            </div>
            <div class="hint">
                <p>
                    Chú ý: Phải dùng file Excel theo <a href="{{ MEDIA_URL }}template_files/ChuongTrinhHoc_template.xls">mẫu
                    này</a>.
                </p>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" id="upload-modal-exit">Thôi</a>
        </div>
    </div>
{#    <div style="display: none;">#}
{#        <div id="fileupload">#}
{#            <form method="post" action="" enctype="multipart/form-data">#}
{#                <div class="fileupload-buttonbar">#}
{#                    {% csrf_token %}#}
{#                    <label class="fileinput-button">#}
{#                        <span>Chọn file...</span>#}
{#                        <input type="file" name="file" multiple>#}
{#                    </label>#}
{#                </div>#}
{#            </form>#}
{#            <div class="fileupload-content">#}
{#                <table class="files"></table>#}
{#                <div class="fileupload-progressbar"></div>#}
{#            </div>#}
{#            <div id="errorDetail" class="errorlist errorDiv" style="display: none;">#}
{#            </div>#}
{#            <p>#}
{#                Chú ý: Phải dùng file Excel theo <a href="{{ MEDIA_URL }}template_files/ChuongTrinhHoc_template.xls">mẫu#}
{#                này</a>.#}
{#            </p>#}
{#        </div>#}
{#    </div>#}
    {% upload_js %}
    <script type="text/javascript" src="/static/js/jquery_file_upload/jquery_upload_for_system_agenda.js"></script>
    <script type="text/javascript" src="/static/js/jquery_file_upload/locale.js"></script>
{% endblock %}